<!doctype html>
<html lang="cn"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>支付</title>
    <link rel="stylesheet" th:href="@{/jquery-weui/dist/lib/weui.min.css}" />
    <link rel="stylesheet" th:href="@{/jquery-weui/dist/css/jquery-weui.min.css}" />
    <link rel="stylesheet" th:href="@{/css/style.css}" />
    <link rel="stylesheet" th:href="@{/css/common.css}" />
    <link rel="stylesheet" th:href="@{/css/reset.css}" />
    <style th:inline="text">
        body {
            background-color: #f5f6f7;
        }

        html, body {
            height: 100%;
            overflow: hidden;
            font-weight: 300;
        }

        * {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .we-pay-keyboard {
            height: 45%;
            position: absolute;
            bottom: 0;
            width: 100%;
            background-color: #eaeaea;
            display: flex;
            display: -webkit-flex;
            border-top: 1px solid #eaeaea;
        }

        .row {
            -webkit-flex: 1;
            flex: 1;
            display: flex;
            display: -webkit-flex;
            margin-right: 1px;
            -webkit-flex-direction: column;
            flex-direction: column;
        }

        .row:last-child {
            margin-right: 0;
        }

        .column {
            display: flex;
            display: -webkit-flex;
            flex: 1;
            -webkit-flex: 1;
            background-color: #ffffff;
            -webkit-align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            align-items: center;
            font-size: 1.8em;
            margin-bottom: 1px;
        }

        .column.active {
            background-color: #eaeaea;
        }

        .column3 {
            -webkit-flex: 3;
            flex: 3;
            background-color: rgba(48, 145, 255, .7);
            color: rgba(255, 255, 255, .7);
            font-size: 1.3em;
        }

        .column3.current {
            background-color: rgb(48, 145, 255);
            color: #ffffff;
        }

        .column3.current.active {
            background-color: #337FFF;
        }

        .column:last-child {
            margin-bottom: 0;
        }

        .del {
            opacity: .8;
            margin-bottom: 0;
            background: url('[[@{/images/del.png}]]') center center no-repeat #ffffff;
            background-size: 42px;
        }

        .del:active {
            opacity: 1;
        }

        .we-title {
            text-align: center;
            margin: 15px;
        }

        .we-title p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 1.3em;
        }

        .we-title img {
            padding: 5px;
            width: 60px;
            height: 60px;
            background-color: #ffffff;
            border-radius: 100%;
        }

        .we-pay-content {
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            -webkit-flex-direction: column;
            height: 55%;
            position: absolute;
            top: 0;
            width: 100%;
        }

        .we-pay-content div {
            flex: 1;
        }

        .we-pay-input {
            margin: 15px;
            background-color: #ffffff;
            border-radius: 9px;
            position: relative;
            padding: 0.2em;
            border: 2px solid rgb(48, 145, 255);
        }

        .we-pay-input input {
            border: none;
            width: 100%;
            padding: .4em 10px .4em;
            font-size: 2em;
            text-align: right;
        }

        .we-pay-input input[value=''] {
            font-size: 1.3em;
        }

        .we-pay-input::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .symbol {
            right: 10px;
        }

        .money, .symbol {
            display: inline-block;
            position: absolute;
            font-size: 1.5em;
            top: 0.65em;
        }

        .money {
            left: 10px;
            color: #9b9b9b;
        }

        .we-copyright {
            display: flex;
            display: -webkit-flex;
            -webkit-align-items: flex-end;
            -webkit-justify-content: center;
            align-items: flex-end;
            justify-content: center;
            font-size: .9em;
            color: #9b9b9b;
        }
        
         .weui-toast {
            transition-duration: 0 !important;
        }

        .weui-toast--text {
            padding-top: 1.5em;
            padding-bottom: 1.5em;
            width: auto;
            max-width: 95%;
            white-space: nowrap;
        }

        .weui-toast_content {
            width: 100%;
        }

        .we-copyright span {
            padding-bottom: 5px;
        }

        img {
            pointer-events: none;
        }

        .loading {
            display: none;
            width: 28px;
            height: 28px;
            background: url('[[@{/images/loading.png}]]');
            background-size: 28px;
            animation: rotation 1s linear infinite;
            -webkit-animation: rotation 1s linear infinite;
        }

        @-webkit-keyframes rotation {
            from {
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
        }
        @keyframes rotation {
            from {
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
        }
        .cover {
            position: fixed;
            top: 0;
            bottom: 0;
            width: 100%;
            z-index: 999999;
            display: none;
        }
    </style>
</head>
<body>
<div class="we-pay">
    <div class="we-pay-content">
        <div class="we-title">
            <img th:src="@{/images/store.png}"/>
            <p th:inline="text">[[${merchantName}]]</p>
        </div>
        <div>
            <div class="we-pay-input">
                <div class="money">消费金额</div>
                <input type="text" id="input" autocomplete="off"/>
                <div class="symbol" id="symbol">￥</div>
            </div>
        </div>
        <div class="we-copyright">
            <span>微兔科技提供技术支持</span>
        </div>
    </div>
    <div class="we-pay-keyboard">
        <div class="row">
            <div class="column touch">1</div>
            <div class="column touch">4</div>
            <div class="column touch">7</div>
            <div class="column"></div>
        </div>
        <div class="row">
            <div class="column touch">2</div>
            <div class="column touch">5</div>
            <div class="column touch">8</div>
            <div class="column touch">0</div>
        </div>
        <div class="row">
            <div class="column touch">3</div>
            <div class="column touch">6</div>
            <div class="column touch">9</div>
            <div class="column touch">.</div>
        </div>
        <div class="row">
            <div class="column del" id="del"></div>
            <div class="column column3" id="submit">
                <div class="loading" id="loading"></div>
                <div class="text" id="submitText">
                    确认<br/>付款
                </div>
            </div>
        </div>
    </div>
</div>
<div class="cover" id="cover"></div>
<div th:include="common/onload_js :: onloadJS"></div>
<script th:inline="javascript">
	/*<![CDATA[*/
	$(function () {
		var $input = $('#input'),
				$submit = $('#submit'),
				$symbol = $('#symbol'),
				$submitText = $('#submitText'),
				$loading = $('#loading'),
				$cover = $('#cover'),
				textWidth = 18;
		FastClick.attach(document.body);
		$submit.bind('touchstart', function () {
			if ($input.val() && $input.val()  >= 0.01) {
				$submitText.hide();
				$cover.show();
				$loading.show();
				$.ajax({
					url: [[${payUrl}]],	// 请求微兔后台发起预订单
					type: 'POST',
					data: JSON.stringify({
						chargeKey: [[${chargeKey}]],	// 收款二维码
						merchantId: [[${merchantId}]],	// 商家ID
						mchId: [[${mchId}]],	// 商户号（威富通生成）
						payTypeCode: [[${payTypeCode}]],	// 支付类型编号
						userId: [[${userId}]],	// 支付宝用户ID
						amount: $input.val() * 100	// 金额
					}),
					contentType: 'application/json; charset=utf-8',
					dataType: 'json',
					success: function (data) {
						$submitText.show();
						$cover.hide();
						$loading.hide();
						if (data.code !== 0) {
							$.toptip('支付失败!', 'error');
							return false;
						}
						var payOrderNo = data.data.payOrderNo;	// 支付预订单编号
						var payOrderClearUrl = data.data.payOrderClearUrl; // 用户取消支付，清理预订单的地址
						var payQueryUrl = data.data.payQueryUrl; // 支付返回失败时，主动查询支付结果的地址
						var payInfo = JSON.parse(data.data.payInfo);
						WeixinJSBridge.invoke('getBrandWCPayRequest', payInfo, function (res) {
							$.hideLoading();
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
								location.href = [[${payOkUrl}]];
							} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
								
								/* 清理预订单*/
								ajax({ url: payOrderClearUrl + '?payOrderNo=' + payOrderNo, type: 'POST' });
							} else {
								alert('支付失败');
							}
						});
					},
					error: function (data) {
						$.toptip('支付失败!', 'error');
						$submitText.show();
						$cover.hide();
						$loading.hide();
					}
				});
			}
		});

		$('.touch').bind('touchstart', function () {
			var key = $(this), val = $input.val(), keyCode = key.text(), value = val + keyCode;
			key.addClass('active');

			if (/^(\d|.)$/.test(keyCode) && value < 10000) {
				if (val === '0' && keyCode !== '.') {
					return false;
				}
				if (val.indexOf('.') !== -1  && (keyCode === '.' || value.split('.')[1].length > 2)) {
					return false;
				}
				$input.val(val + keyCode);
				if ($input.val() && !$submit.hasClass('current')) {
					$submit.addClass('current');
				}
				var right = Math.floor($symbol.css('right').split('px')[0]);
				$symbol.css('right', right + textWidth + 'px');
			}
			if ($input.val().indexOf('.') === -1 && val.length >= 4) {
				$.toast("超过最大可支付金额", "text");
			}
		}).bind('touchend', function () {
			$(this).removeClass('active');
		});

		$(document.body).bind('contextmenu', function (e) {
			e.preventDefault();
		});

		$('#del').bind('touchstart', function (e) {
			var val = $input.val();
			$input.val(val.substring(0, val.length - 1));
			if (!$input.val() && $submit.hasClass('current')) {
				$submit.removeClass('current');
			}
			if (val) {
				var right = Math.floor($symbol.css('right').split('px')[0]);
				$symbol.css('right', right - textWidth + 'px');
			}
		})
	})
	/*]]>*/
</script>
</body>
</html>